<template>
	<view class="wrap u-flex-col">
		<!-- <view class="searchBox">
			<u-search
				v-model="value"
				@change="change"
				@custom="custom"
				@search="search"
				:shape="shape"
				:clearabled="clearabled"
				:show-action="showAction"
				:input-align="inputAlign"
				@clear="clear"
			></u-search>
		</view> -->
		<view class="noteBox u-flex-1">
			<view class="title">
				<u-icon name="volume-up" :color="'#2979FF'" size="20px"></u-icon>
				<text>代办事项</text>
			</view>
			<view class="listBox">
				<view class="noteItem" v-for="(item, ind) in list" :key="ind" @click="notePage">
					<view class="title">{{ item.title }}</view>
					<view class="desc">{{ item.desc }}</view>
					<view class="operLog">
						<text class="u-text-left">创建人:{{ item.createBy }}</text>
						<text class="u-text-right">创建时间:{{ item.createTime }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="noteBox viewNav u-flex-1">
			<view class="title">
				<u-icon name="bell-fill" :color="'#2979FF'" size="20px"></u-icon>
				<text>通知</text>
			</view>
			<view class="listBox">
				<view class="noteItem" v-for="(item, ind) in needList" :key="ind" @click="notePage">
					<view class="title">{{ item.title }}</view>
					<view class="desc">{{ item.desc }}</view>
					<view class="operLog">
						<text class="u-text-left">创建人:{{ item.createBy }}</text>
						<text class="u-text-right">创建时间:{{ item.createTime }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 这边处理底部菜单的高度 -->
		<!-- <u-gap height="70"></u-gap> -->
		<view class="suspensionBox" id="suspensionBox" @click="showNavOper" :style="style">
			<view class="navList" v-if="openNav">
				<u-icon class="myicon icon-1" name="calendar-fill"></u-icon>
				<u-icon class="myicon icon-2" name="google-circle-fill"></u-icon>
				<u-icon class="myicon icon-3" name="bag-fill"></u-icon>
				<u-icon class="myicon icon-4" name="file-text-fill"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
import { Home } from './index.js';
export default {
	data() {
		return {
			list: new Home().noteList,
			needList:new Home().needList,
			value: '',
			shape: '',
			clearabled: true,
			showAction: false,
			inputAlign: 'left',
			icon:{
				size:100,
				color:'#d8d8d8'
			},
			style:'',
			openNav:false,
			// desc: '众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让你快速集成，开箱即用。',
		};
	},
	computed: {
		getIcon() {
			return path => {
				return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
			};
		},
		desc() {
			return this.$t('components.desc');
		}
	},
	onShow() {
		uni.setNavigationBarTitle({
			title:'首页'
		});
		
	},
	onLoad() {
		const elem = document.getElementById('suspensionBox');
		// elem.addEventListener("touchstar",function(e){
		// 	console.log(e);
		// });
	},
	created() {},
	methods: {
		notePage() {
			this.$u.route({
				url: 'pages/note/index',
				params: {
					id: 11
				}
			});
		},
		touchNav(e){
			const left = e.left;
			console.log(e)
		},
		showNavOper(){
			this.openNav = !this.openNav
		},
		openPage(path) {
			this.$u.route({
				url: path
			});
		},
		getGroupTitle(item) {
			return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en;
		},
		getFieldTitle(item) {
			return this.$i18n.locale == 'zh' ? item.title : item.title_en;
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap{
	height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	background-color: rgb(240, 242, 244);
}
.u-cell-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 8rpx;
}
.searchBox {
	padding: 30rpx 30rpx 10rpx;
}
.noteBox {
	background: #fff;
	border-radius: 0.3em;
	margin: 20rpx;
	padding:20rpx;
	height:50%;
	
	> .title{
		font-size:32rpx;
		height:56rpx;
		color:#999;
		text{
			display: inline-block;
			margin-left:10rpx;
		}
	}
	.listBox{
		height:calc(100% - 56rpx);
		overflow-y: auto;
	}
	.noteItem {
		
		padding: 20rpx 0;
		border-bottom: 1px solid #e7e7e7;
		&:first-child {
			padding-top: 0;
		}
		.title {
			font-weight: 600;
			margin-bottom: 10rpx;
		}
		.desc {
			color: #666666;
		}
		.operLog {
			font-size: 13px;
			overflow: hidden;
			margin-top: 10rpx;
			color: #999999;
		}
		.u-text-left {
			float: left;
		}
		.u-text-right {
			float: right;
		}
	}
}
.viewNav {
	overflow: hidden;
	height:50%;
	background: #fff;
	border-radius: 0.3em;
	margin:0 20rpx 20rpx;
	padding:20rpx;
	.navItem {
		float: left;
		width: calc(100vw / 2);
		.itemBox {
			height: 200rpx;
			width: 60%;
			position: relative;
			text-align: center;
			padding-top: 12%;
			.grid-text{
				color:#999;
			}
		}
		&:nth-child(2n) {
			.itemBox {
				left: 5%;
			}
		}
		&:nth-child(2n-1) {
			.itemBox {
				left: 30%;
			}
		}
	}
}
.suspensionBox{
	position: fixed;
	z-index: 999;
	right:20rpx;
	bottom:50%;
	width: 100rpx;
	height:100rpx;
	cursor: pointer;
	&::before{
		content: '';
		position: absolute;
		top:0;
		left:0;
		width: 100rpx;
		height:100rpx;
		background: rgba(0,0,0,0.1);
		border-radius: 100rpx;
		overflow: hidden;
		background: url('@/static/images/tipNav.jpg') center center no-repeat;
		background-size: 100% auto;
		opacity: 0.9;
	}
	// &::after{
	// 	content: '';
	// 	position: absolute;
	// 	top:20rpx;
	// 	left:20rpx;
	// 	width: 60rpx;
	// 	height:60rpx;
	// 	background: rgba(0,0,0,0.6);
	// 	border-radius: 100rpx;
	// }
	.myicon{
		position: absolute;
		z-index: 888;
		height:40rpx;
		width: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius:40rpx;
		background: #2979FF;
		color:#fff;
		padding-left:8rpx;
		padding-top:2rpx;
		opacity: 0;
		&.icon-1{
			animation:mymove1 0.5s ease-out 0s;
			animation-fill-mode : forwards;
		}
		&.icon-2{
			animation:mymove2 0.5s ease-out 0.3s;
			animation-fill-mode : forwards;
		}
		&.icon-3{
			animation:mymove3 0.5s ease-out 0.6s;
			animation-fill-mode : forwards;
		}
		&.icon-4{
			animation:mymove4 0.5s ease-out 0.9s;
			animation-fill-mode : forwards;
		}
		
	}
	@keyframes mymove1
	{
		from {
			opacity: 0;
			top:30rpx;
			left:30rpx;
		}
		to {
			opacity: 1;
			top:-60rpx;
			left:-30rpx;
		}
	}
	@keyframes mymove2
	{
		from {
			opacity: 0;
			top:30rpx;
			left:30rpx;
		}
		to {
			opacity: 1;
			top:-5rpx;
			left:-80rpx;
		}
	}
	@keyframes mymove3
	{
		from {
			opacity: 0;
			top:30rpx;
			left:30rpx;
		}
		to {
			opacity: 1;
			top:60rpx;
			left:-80rpx;
		}
	}
	@keyframes mymove4
	{
		from {
			opacity: 0;
			top:30rpx;
			left:30rpx;
		}
		to {
			opacity: 1;
			top:120rpx;
			left:-30rpx;
		}
	}
}
</style>
